<template>
  <div>
    <view>
      <view class="space"></view>
      <view hidden='true' name="questionId"></view>
      <l-card l-class="card1" type="avatar" position="right" :image="questionData.avatarUrl" :title="questionData.nickName">
        <!--此处为content-->
        <view class="avatar-content-question">
          {{questionData.title}}
        </view>
        <view class="avatar-content">
          {{questionData.content}}
        </view>
        <view class="data">
          <view class="number">{{questionData.date}}</view>
        </view>

        <view class="avter-share-container">
          <view class="like-container">
            <l-icon name="like" color="#666" size="28" />
            <view class="number">{{questionData.likesNum}}喜欢</view>
          </view>

          <view class="like-container">
            <l-icon name="default" color="#666" size="28" />
            <view class="number">{{questionData.answersNum}}评论</view>
          </view>
        </view>
      </l-card>
    </view>
    <view class="space"></view>
    <l-notice-bar show="true" type="roll" speed="1500" front-icon-name="notification" end-icon-name="close" close="true">让我们看看有多少真香怪来体现人类的本质</l-notice-bar>
    <view class="space"></view>
    <view class="situation">
      <text class="font">初始局势分析</text>
      <progress :percent="priNum" color="#FF0000" backgroundColor="#6495ED" active="true" show-info="true"/>

      <text class="font">现局势分析</text>
      <progress :percent="nowNum" color="#FF0000" backgroundColor="#6495ED" active="true" show-info="true"/>
    </view>

    <view class="tab">
      <l-tabs animated-for-line="true" swipeable="true" l-class-content="tabs" active-color="#FF0000" inactive-color="#6495ED">
        <l-tabpanel tab="我方" key="one" slot="one" icon="user">
          <view class="card" v-for="(item,index) in answersData" :key="index" v-if="item.position==1||item.position==5">
            <!--内容栏-->
            <view hidden='true' name="questionId"></view>
            <l-card type="avatar" position="right" :image="item.avatarUrl" :title="item.nickName">
              <!--此处为content-->
              <view class="avatar-content-question" @click='clickEvent' data-answer-id='item.answerId' data-answer-image="item.avatarUrl" data-answer-nickName="item.nickName">
                {{item.content}}
              </view>
              <view class="avter-share-container">
                <view class="like-container">

                  <l-icon name="like" size="28" data-like-id="index" @click='clickLike' v-if="item.isLike==0" data-a-id='item.answerId'/>
                  <l-icon name="like" size="28" color='red' data-like-id="index" @click='clickLike' v-if="item.isLike==1" />
                  <view class="number">{{item.likesNum}}喜欢</view>
                </view>
                <view class="like-container">
                  <l-icon name="default" color="#666" size="28" />
                  <view class="number">{{item.replyNum}}评论</view>
                </view>
              </view>
            </l-card>
          </view>
        </l-tabpanel>

        <l-tabpanel tab="反方" key="two" slot="two" icon="user">
          <view class="card" v-for="(item,index) in answersData" :key="index" v-if="item.position==2||item.position==4">
            <!--内容栏-->
            <view hidden='true' name="questionId"></view>
            <l-card type="avatar" position="right" :image="item.avatarUrl" :title="item.nickName">
              <!--此处为content-->

              <view class="avatar-content-question" @click='clickEvent' data-answer-id='item.answerId' data-answer-image="item.avatarUrl" data-answer-nickName="item.nickName">
                {{item.content}}
              </view>

              <view class="avter-share-container">
                <view class="like-container">

                  <l-icon name="like" size="28" data-like-id="index" @click='clickLike' v-if="item.isLike==0" data-a-id='item.answerId'/>

                  <l-icon name="like" size="28" color='red' data-like-id="index" @click='clickLike' v-if="item.isLike==1" />

                  <view class="number">{{item.likesNum}}喜欢</view>
                </view>
                <view class="like-container">
                  <l-icon name="default" color="#666" size="28" />
                  <view class="number">{{item.replyNum}}评论</view>
                </view>

                <view class="like-container" bindtap='changPosition' data-position-changto='4' data-whoConquer-me='item.userId' data-question-id='questionData.questionId' data-answer-id='item.answerId'>
                  <l-icon name="warning" color="red" size="28" />
                  <view class="number">真香</view>
                </view>
              </view>
            </l-card>
          </view>

        </l-tabpanel>
      </l-tabs>

      <view @click='addAnswer'>
        <l-icon name="add" l-class="icon" size="70"></l-icon>
      </view>
    </view>
  </div>
</template>

<script>
  export default {
    name: 'NegativeSide',
    data () {
      return {
        questionId: 0,
        questionData: {},
        answersData: {},
        priNum: 0,
        nowNum: 0
      }
    },
    methods: {
      clickLike: function (res) {
        console.log('+++++++++++++++++****+++++++++')
        console.log(res)
        console.log(res.currentTarget.dataset.likeId)
        var index = res.currentTarget.dataset.likeId
        var all = this.data.answersData
        if (all[index].isLike === 0) {
          all[index].isLike = 1
          all[index].likesNum += 1
          wx.request({
            url: 'http://47.94.166.187:8080/miniProgram/addLikeMe',
            data: {
              token: wx.getStorageSync('token'),
              targetType: 2,
              targetId: res.target.dataset.aId
            },
            success (res) {
              wx.showToast({
                title: '点赞成功',
                duration: 1000
              })
            }
          })
        }
        console.log('+++++++++++++++++++++++++++2131213231')
        console.log(all)
        this.answersData = all
      },
      /** *******改变立场*********** */
      changPosition (res) {
        var that = this
        var res1 = res
        console.log('****///*******')
        console.log(res1)
        wx.showModal({
          title: '改变立场？',
          content: '只有一次改变立场的机会哦~',
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
              wx.request({
                url: 'http://47.94.166.187:8080/miniProgram/changeMyPosition',
                data: {
                  token: wx.getStorageSync('token'),
                  questionId: res1.currentTarget.dataset.questionId,
                  answerId: res1.currentTarget.dataset.answerId,
                  conquerorId: res1.currentTarget.dataset.whoconquerMe,
                  newPosition: res1.currentTarget.dataset.positionChangto
                },
                success (res) {
                  wx.redirectTo({
                    url: '/pages/NegativeSide?questionId=' + that.data.questionId
                  })
                }
              })
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },

      // 层层回复
      clickEvent (res) {
        console.log('------------********----------------')
        console.log(res)
        var aid = res.currentTarget.dataset.answerId
        var aimage = res.currentTarget.dataset.answerImage
        var anickName = res.currentTarget.dataset.answerNickname
        wx.navigateTo({
          url: '/pages/answerBody/answerBody?answerId=' + aid + '&avatarUrl=' + aimage + '&nickName=' + anickName
        })
      },

      addAnswer (res) {
        wx.navigateTo({
          url: '/pages/addAnswer?questionId=' + this.data.questionId
        })
      }
    },
    onLoad (options) {
      console.log('-------------------------')
      console.log(options.questionId)
      let that = this
      that.questionId = options.questionId
      wx.request({
        url: 'http://47.94.166.187:8080/miniProgram/questionDetail',
        data: {
          token: wx.getStorageSync('token'),
          targetId: that.questionId
        },
        success (res) {
          console.log('******************获取目标问题信息********************')
          console.log(res)
          that.questionData = res.data.object
          console.log(that.questionData)
          // let allNum = res.object.againstNum + res.object.priAgaNum + res.object.priSupNum + res.object.supportNum
          // let priPercent = (res.object.priAgaNum + res.object.againstNum) / allNum * 100
          //
          // let nowPercent = (res.object.againstNum + res.object.supportNum) / allNum * 100
          //
          // console.log(priPercent)
          // console.log(nowPercent)
          // that.questionData = res.object
          // that.priNum = priPercent
          // that.nowNum = nowPercent
          wx.request({
            url: 'http://47.94.166.187:8080/miniProgram/selAnswersByQuestion',
            data: {
              token: wx.getStorageSync('token'),
              questionId: that.questionId
            },
            success (res) {
              console.log('++++++++++++++++++++获取所有目标问题回答+++++++++++++++++++')

              console.log(res)
              that.answersData = res.object
            }
          })
        }
      })
    }
  }
</script>

<style>
  .card1 {
    margin-bottom: 20rpx;
    border-radius: .3rem !important;
  }

  .space{
    margin-top: 20rpx;
  }

  .situation{
    margin-left: 20rpx;
    margin-right: 20rpx;
  }

  .font{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
  }


  /**********内容**********/
  .card{
    margin-bottom: 30rpx;
  }

  .avatar-content-title{
    font-size: 40rpx;
    margin-bottom:10rpx;
  }

  .avter-share-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
  .avatar-content{
    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    font-size: 28rpx;
    overflow: hidden;

    margin-bottom:20rpx;
  }
  .like-container{
    display: flex;
    margin-right: 18rpx;
    margin-top: 10rpx;
  }

  .data{
    display: flex;
    margin-right: 18rpx;
    margin-top: 10rpx;
  }

  .number{
    font-size: 26rpx;
    margin-left: 4rpx;
  }


  .space{
    display: flex;
    align-items: center;
    width: 100%;
    height: 20rpx;
    background: white;
  }

  .tab{
    margin-top: 20rpx;
  }

  .avatar-content1{
    font-size: 30rpx;
  }

  .icon{
    position: fixed !important;
    height: 42px !important;
    bottom: 20px !important;
    right: 20px !important;
  }

  .text{
    font-size:20px;
  }

  .tabs{
    height: 4500rpx !important;
  }

</style>
